<template>
  <div class="rbox">
    <div class="r r1" @click="refresh()">
      <img src="~assets/images/r-reflash.png">
    </div>
    <div class="r r2" @mouseenter="toggleShow()" @mouseleave="toggleShow()">
      <img src="~assets/images/r-erweima.png">
      <div class="ma" v-show="isShow"><img src="~assets/images/r-icity-erwerma.png"></div>
    </div>
    <div class="r r3" @click="goTop" ref="btn" >
      <img src="~assets/images/r-gotop.png">
    </div>
  </div>
</template>

<script>
 let timer = null
export default {
  data () {
    return {
      isShow:false,
      isTop: false
    }
  },
  mounted () {
    this.needScroll()
  },
  methods: {
    refresh () {
      window.location.reload()
    },
    toggleShow: function() {
      this.isShow = !this.isShow
    },
    needScroll () {
      let clientHeight = document.documentElement.clientHeight
      let obtn = this.$refs.btn
      window.onscroll = function () {
        let osTop = document.documentElement.scrollTop || document.body.scrollTop
        if (osTop >= clientHeight) {
          obtn.style.display = 'block'
        } else {
          obtn.style.display = 'none'
        }
        if (!this.isTop) {
          clearInterval(timer)
        }
        this.isTop = false
      }
    },
    goTop () {
      timer = setInterval(function () {
        let osTop = document.documentElement.scrollTop || document.body.scrollTop
        let ispeed = Math.floor(-osTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed
        this.isTop = true
        if (osTop === 0) {
          clearInterval(timer)
        }
      }, 30)
    }
  }
}
</script>

<style scoped>
.rbox{ width: 50px; height: 180px; position: fixed; left:50%; margin-left: 560px; top:70%; }
.r{width: 50px; height: 50px; background:#ddd; border-radius: 50%; text-align: center; margin-bottom: 20px; position: relative;}
.r img{ width:32px; height: 50px; display: block; margin:0 auto; padding:9px 0px; }
.r:hover{background:#f00;}
.ma{ width: 110px; height: 150px; position: absolute; right:60px; top:-30px; }
.ma img{width: 110px; height: 150px;}
</style>
